<template>
  <div class="app-container">
    <el-table :data="adminList" style="width: 100%" v-loading="flag">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="头像">
              <el-avatar :size="50" :src="props.row.avatar"></el-avatar>
            </el-form-item>
            <el-form-item label="ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="账号">
              <span>{{ props.row.admin }}</span>
            </el-form-item>
            <el-form-item label="系统权限">
              <span>{{ props.row.del_flag }}</span>
            </el-form-item>
            <el-form-item label="邮箱">
              <span>{{ props.row.email }}</span>
            </el-form-item>
            <el-form-item label="介绍">
              <span>{{ props.row.introduction }}</span>
            </el-form-item>
            <el-form-item label="手机号">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="角色">
              <span>{{ props.row.roles }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id" width="50" align="center">
      </el-table-column>
      <el-table-column label="头像 (Default)" align="center">
        <template slot-scope="props">
          <el-avatar :size="50" :src="props.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="账号" prop="admin" align="center">
      </el-table-column>
      <el-table-column label="邮箱" prop="email" align="center">
      </el-table-column>
      <el-table-column label="联系电话" prop="phone" align="center">
      </el-table-column>
      <el-table-column label="介绍" prop="introduction" align="center">
      </el-table-column>
      <el-table-column label="账号权限" align="center">
        <template slot-scope="props">
          <el-radio-group v-model="props.row.del_flag" v-if="props.row.admin === 'admin'">
            <el-radio-button disabled label="已开放"></el-radio-button>
            <el-radio-button disabled label="暂停权限"></el-radio-button>
          </el-radio-group>
          <el-radio-group v-model="props.row.del_flag" @input="change(props.row)" v-else>
            <el-radio-button label="已开放"></el-radio-button>
            <el-radio-button label="暂停权限"></el-radio-button>
          </el-radio-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

import { mapActions, mapGetters, mapState } from 'vuex'

export default {
  name: 'AdminTable',
  data() {
    return {
      flag: false,
    }
  },
  created() {
    this.queryAdminList()
  },
  computed: {
    ...mapGetters(['adminList', 'name']),
  },
  methods: {
    change(row) {
      this.flag = true;
      if (this.name !== 'admin') this.$message.error('管理员权限只有创作者可修改！')
      else {
        this.$store.dispatch('manage/editPower', row)
          .then(
            resp => {
              const { data } = resp
              setTimeout(() => {
                this.flag = false
                if (data) {
                  this.$message.success(` ${row.admin} 的权限修改成功！`)
                }
              }, 1500);

            }
          ).catch(
            error => {
              this.$message.error(error)
            }
          ).finally(() => {

          })
      }
      this.flag = false
    },
    queryAdminList() {
      this.$store.dispatch('manage/queryAdminList')
      /**
       * 保证数据一致性 可能存在刷新网页数据丢失的问题
       */
      this.adminList.length === 0 ? this.adminList = JSON.parse(sessionStorage.getItem('adminList')) : this.adminList
    }
  },
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
